<template>
  <div class="container">
    <van-nav-bar
      :title="!addAddress ? '我的收获地址' : '编辑收获地址'"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />

    <!-- 提示 -->
    <div class="reminder" v-if="!addAddress && JSON.stringify(list) === '[]'">
      <img
        src="//static.daojia.com/pt/project/h5-order-list/img/no-data.202566e.png"
        alt=""
      />
      <p>你还没有收获地址</p>
      <van-button type="warning" plain round @click="onAdd"
        >添加收获地址</van-button
      >
    </div>

    <!-- 地址列表 -->
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      v-else-if="!addAddress"
      @select="select"
      @click-item="onChooseAdressClick"
    />

    <!-- 地址编辑 -->
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      :show-set-default="true"
      show-search-result
      :address-info="addressInfo"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      v-else
    />
  </div>
</template>

<script>
import { areaList } from "@/utils/area.js";
import { mapMutations, mapState } from "vuex";
import store from "@/store";
import { addAddress, getAddress, etidAddress, deleteAddress } from "@/api/cart";

export default {
  computed: {
    // ...mapState("cart", ["address"]),
  },
  data() {
    return {
      chosenAddressId: "1",
      list: [],
      // 新增地址
      areaList: areaList,
      addressInfo: {},
      addAddress: false,
      isEdit: false
    };
  },
  created() {
    this.loadAddress();
    // this.list = this.address;
  },
  methods: {
    ...mapMutations("cart", ["setDefaultAddress"]),
    // 调用接口，获取用户所有地址
    async loadAddress() {
      const result = await getAddress({ user_id: store.getters.id });
      this.list = result;
      this.$forceUpdate();
    },
    onAdd() {
      // 点击新增地址
      this.addressInfo = {};
      this.isEdit = false;
      this.addAddress = true;
    },
    onEdit(item, index) {
      // 点击编辑地址
      this.isEdit = true;
      this.addressInfo = item;
      this.addAddress = true;
    },
    select(item, index) {
      this.setDefaultAddress(item);
      this.$router.back();
    },
    onChooseAdressClick(item, index) {
      // 存储为当前默认地址
    },

    // 添加新地址
    async onSave(AddressInfo) {
      const address = {
        name: AddressInfo.name,
        tel: AddressInfo.tel,
        address:
          AddressInfo.province +
          AddressInfo.city +
          AddressInfo.county +
          AddressInfo.addressDetail,
        addressDetail: AddressInfo.addressDetail,
        areaCode: AddressInfo.areaCode,
        postalCode: AddressInfo.postalCode
      };
      if (this.isEdit) {
        // 编辑地址，put方法
        await etidAddress({
          ...address,
          user_id: store.getters.id,
          id: this.addressInfo.id
        });
        this.$toast("修改地址成功");
      } else {
        // 新增地址，post请求
        this.addressInfo = {};
        await addAddress({ ...address, user_id: store.getters.id });
        this.$toast("新增地址成功");
      }
      this.loadAddress();
      this.addAddress = false;
    },
    // 删除地址
    async onDelete(content) {
      await deleteAddress(content.id);
      this.loadAddress();
      this.addAddress = false;
    },
    onChangeDetail(val) {},

    // 左侧按钮点击事件
    onClickLeft() {
      if (this.addAddress) {
        this.addAddress = false;
      } else {
        this.$router.back();
      }
    }
  },
  beforeDestroy() {
    this.list = [];
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 80%;
  padding-top: 46px;
  .reminder {
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      width: 30%;
      height: 30%;
    }
    p {
      font-weight: normal;
      font-size: 16px;
    }
  }
}
</style>
